<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{margin: 0px; padding: 0px;}
			li{list-style: none;}
			img{vertical-align: bottom;}
			
			.foo{
				width: 600px;
				height: 600px;
				border: 1px solid #666;
				margin: 50px;
				position: relative;
			}
			
			.box{
				width: 400px;
				height: 500px;
				border: 1px solid #666;
				margin: 50px;
			}
			.up{
				width: 400px;
				height: 400px;
				position: relative;
			}
			.up>img{
				width: 100%;
			}
			.slide{
				width: 200px;
				height: 200px;
				background: url(imgs/slide.png);
				position: absolute;
				left: 0px;
				top: 0px;
				cursor: move;
				/* 默认隐藏 */
				display: none;
			}
			.big{
				width: 400px;
				height: 400px;
				position: absolute;
				right: -450px;
				top: 0px;
				border: 1px solid red;
				overflow: hidden;
				/* 默认隐藏 */
				display: none;
			}
			.bigImg{
				width: 800px;
				/* 定位 */
				position: absolute;
				left: 0px;
				top: 0px;
				/* border: 10px solid green; */
			}
			
			.down{
				width: 400px;
				height: 100px;
			}
			.down ul{
				
			}
			.down ul li{
				width: 90px;
				border: 5px solid white;
				float: left;
			}
			.down ul li img{
				width: 100%;
			}
			.down ul li:hover{
				border-color: aqua;
			}
			
		</style>
	</head>
	<body>
		<!-- <div class="foo"> -->
			
		
		<div class="box">
			<!-- 上 -->
			<div class="up">
				
				<!-- 小图 -->
				<img class="smallImg" src="imgs/1.jpg" alt="" />
				<!-- 滑块 -->
				<div class="slide"></div>
				<!-- 大图容器 -->
				<div class="big">
					<img class="bigImg" src="imgs/1.jpg" alt="" />
				</div>
				
			</div>
			<!-- 下 列表 -->
			<div class="down">
				<ul>
					<li>
						<img src="imgs/1.jpg" alt="" />
					</li>
					<li><img src="imgs/2.jpg" alt="" /></li>
					<li><img src="imgs/3.jpg" alt="" /></li>
					<li><img src="imgs/4.jpg" alt="" /></li>
				</ul>
			</div>
			
		</div>
		<!-- </div> -->
	</body>
</html>
<script>
	
	let oBox = document.querySelector('.box');
	let oSmallImg = document.querySelector('.smallImg');
	let oSlide = document.querySelector('.slide');
	let oUp = document.querySelector('.up');
	let oBig = document.querySelector('.big');
	let oBigImg = document.querySelector('.bigImg');
	let oUl = document.querySelector('.ul');
	let aLi = document.querySelectorAll('.down li');
	
	// 鼠标移动up
	oUp.onmousemove = function(event){
		// 最终设置的值，先减去滑块的一半, 再减去净位置(元素到浏览器窗口的距离)
		let l = event.clientX - oSlide.offsetWidth/2 - oBox.getBoundingClientRect().left;
		let t = event.clientY - oSlide.offsetWidth/2 - oBox.getBoundingClientRect().top;
		
		//控制范围
		if(l <= 0){l = 0};
		if(t <= 0){t = 0};
		//滑块可以移动最大值
		let maxXY = oUp.clientWidth - oSlide.offsetWidth;
		if(l >= maxXY){l = maxXY};
		if(t >= maxXY){t = maxXY};
		
		//设置滑块
		oSlide.style.left = l + 'px';
		oSlide.style.top = t + 'px';
		
		console.log(oBigImg.offsetWidth);
		//比例
		let biliXY = (oBigImg.offsetWidth - oBig.clientWidth) / (oUp.clientWidth - oSlide.offsetWidth);
		
		//设置右边大图跟随
		oBigImg.style.left = -l * biliXY + 'px';
		oBigImg.style.top = -t * biliXY  + 'px';
		
	};
	
	// 鼠标移入移出
	oUp.onmouseenter = function(){
		oSlide.style.display = 'block';
		oBig.style.display = 'block';
	};
	
	oUp.onmouseleave = function(){
		oSlide.style.display = 'none';
		oBig.style.display = 'none';
	};
	
	//点击下面列表
	//批量监听
	for(let i = 0; i < aLi.length; i++){
		
		//监听事件
		aLi[i].onclick = function(){
			//拿的到当前点击的元素的  img src 的路径值
			// console.log(this);
			//节点关系
			// console.log(this.firstElementChild.src);
			// console.log(this.firstElementChild.getAttribute('src'));
			let newSrc = this.firstElementChild.getAttribute('src');
			// 设置
			oSmallImg.src = newSrc;
			oBigImg.src = newSrc;
			
			for(let i = 0; i < aLi.length; i++){
				aLi[i].style.borderColor = 'white';
			};
			
			this.style.borderColor = 'orange';
		}
		
	}
	
</script>